<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>联系我们</title>
    <meta name="keywords" content="文乐文">
    <meta name="description" content="文乐文">

    <link rel="stylesheet" href="static/css/swiper.min.css" type="text/css" >
    <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css" >
    <link rel="stylesheet" href="static/css/common.css" type="text/css" >
</head>
<body>

<!-- 包含头部 -->
<div class="header_box">  <!-- container-fluid -->
    <div class="header container">
        <div class="logo_box">
            <img src="static/picture/logo2.png">
        </div>
        <div class="nav_box">
            <a href="index.html">
                <div class="item">首页</div>
              </a>
              <a href="goods.html">
                <div class="item">产品中心</div>
              </a>
              <a href="integral.html">
                <div class="item">积分商城</div>
              </a>
              <a href="lease.html">
                <div class="item">进销存ERP</div>
              </a>
              <a href="service.html">
                <div class="item">服务与支持</div>
              </a>
              <a href="my.html">
                <div class="item ">个人中心</div>
            </a>
        </div>
        <div class="buy-box">
            <a href="javascript:;" class="tit">购买</a>
            <div class="sub" style="display: none;">
                <div class="list">
                    <a target="_blank" href="https://mall.jd.com/index-11504190.html?from=pc">文乐文京东旗舰店</a>
                </div>
            </div>
        </div>
        <div class="search_box">
            <input name="keyword" type="text" class="search_input" id="header_search_input" placeholder="搜索">
            <button id="header_search_btn" class="search_btn"></button>
        </div>
    </div>
</div>

<div class="page_contact">
    <div class="container">
        <div class="title">
            联系我们<span>/Contact us</span>
        </div>
    </div>
    <div class="contact_box container">
        <div class="item col-sm-4">
            <div class="input-group">
                <span class="input-group-addon">姓名</span>
                <input type="text" class="form-control" name="name" placeholder="姓名">
            </div>
        </div>
        <div class="item col-sm-4">
            <div class="input-group">
                <span class="input-group-addon">手机号</span>
                <input type="text" class="form-control" name="mobile" placeholder="手机号">
            </div>
        </div>
        <div class="item col-sm-4">
            <div class="input-group">
                <span class="input-group-addon">邮箱</span>
                <input type="text" class="form-control" name="email" placeholder="邮箱">
            </div>
        </div>
    </div>

    <div class="remark_box container">
        <div class="rtitle col-sm-1">留言内容：</div>
        <div class="rcontent col-sm-11">
            <textarea class="form-control" rows="5" name="remark" placeholder="在这写下留言。。。"></textarea>
        </div>
    </div>

    <div class="button_box container">
        <button class="btn btn-danger submit_btn" data-loading-text="Loading..." type="button">提交</button>
    </div>


    <script type="text/javascript" src="static/js/api.js"></script>
    <div class="contact_map_box container">
        <div id="company_map" style="width:100%;height:500px"></div>
        <script type="text/javascript">
            //创建和初始化地图函数：
            function initMap(){
                createMap();//创建地图
                setMapEvent();//设置地图事件
                addMapControl();//向地图添加控件
                addMapOverlay();//向地图添加覆盖物
            }
            function createMap(){
                map = new BMap.Map("company_map");
                map.centerAndZoom(new BMap.Point(121.64766,29.899732),14);
            }
            function setMapEvent(){
                map.enableScrollWheelZoom();
                map.enableKeyboard();
                map.enableDragging();
                map.enableDoubleClickZoom()
            }
            function addClickHandler(target,window){
                target.addEventListener("click",function(){
                    target.openInfoWindow(window);
                });
            }
            function addMapOverlay(){
                var markers = [
                    {content:"文乐文公司",title:"文乐文公司",imageOffset: {width:0,height:-21},position:{lat:29.902237,lng:121.637168}}
                ];
                for(var index = 0; index < markers.length; index++ ){
                    var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
                    var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
                            imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
                        })});
                    var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
                    var opts = {
                        width: 200,
                        title: markers[index].title,
                        enableMessage: false
                    };
                    var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
                    marker.setLabel(label);
                    addClickHandler(marker,infoWindow);
                    map.addOverlay(marker);
                };
            }
            //向地图添加控件
            function addMapControl(){
                var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
                scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
                map.addControl(scaleControl);
                var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
                map.addControl(navControl);
                var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
                map.addControl(overviewControl);
            }
            var map;
            initMap();
        </script>
    </div>


</div>





<!-- 包含公共底部文件 -->
<div class="footer">
    <div class="footer_box container">
        <div class="contact_box col-sm-4 f-cb">
            <div class="dtitle">服务/Service</div>
            <div class="tel_box">
                <p class="title">全国统一热线电话</p>
                <p class="tel">0574-58974484</p>
            </div>
            <div class="mail_box">
                <p class="title">服务邮箱</p>
                <p class="mail">598292588@qq.com</p>
            </div>
        </div>
        <div class="nav_list col-sm-4 f-cb">
            <div class="dtitle">导航/Navigation</div>
            <ul class="nav_box">
                <li><a href="about.html">关于我们</a></li>
                <li><a href="index1.html">商品中心</a></li>
                <li><a href="lease.html">打印机租赁</a></li>
                <li><a href="service.html">服务与支持</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
        <div class="search col-sm-4 f-cb">
            <div class="dtitle">产品中心/Product center</div>
            <div class="search_box">
                <input class="search_input" name="keyword" placeholder="搜索">
                <!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
                <a class="btn btn-primary jd_btn" target="_blank" href="https://mall.jd.com/index-11504190.html?from=pc">京东商城</a>
            </div>
            <div class="wechat_box">
                <div class="item">
                    <img src="static/picture/wechat.svg">
                </div>
                <div class="item">
                    <img src="static/picture/weibo.svg">
                </div>
            </div>
        </div>
    </div>

    <div class="site_info container">
        Copyright ©2020 宁波文乐文科技有限公司 版权所有 <a href="https://beian.miit.gov.cn/#/Integrated/index">浙ICP备2020041669号-1</a>
    </div>
</div>

<script src="static/js/jquery.js" type="text/javascript" >
<script src="/portal/bootstrap/js/bootstrap.js" type="text/javascript" ></script>
<script src="static/js/common.js" type="text/javascript" ></script>
<script src="static/js/layer.js" type="text/javascript" ></script>
<script>
    $(function (){

        $('.submit_btn').click(function (){
            if($('input[name=name]').val() == ''){
                layer.open({type: 4,time:1500,content: ['请填写姓名！',opt_btn]});return ;
            }
            if($('input[name=mobile]').val() == ''){
                layer.open({type: 4,time:1500,content: ['请填写手机号！',opt_btn]});return ;
            }
            // if($('input[name=email]').val() == ''){
            //     layer.open({type: 4,time:1500,content: ['请填写邮箱！',opt_btn]});return ;
            // }
            if($('textarea[name=remark]').val() == ''){
                layer.open({type: 4,time:1500,content: ['请填写留言！',opt_btn]});return ;
            }
            $.ajax({
                url:'/portal/index/contact',
                headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
                data:{
                    name:$('input[name=name]').val(),
                    mobile:$('input[name=mobile]').val(),
                    email:$('input[name=email]').val(),
                    remark:$('textarea[name=remark]').val(),
                },
                type:"post",
                success:function (res){
                    if(res.code != 1){
                        return layer.open({title: '错误',content: '留言失败：'+ res.msg});
                    } else {
                        return layer.open({title: '成功',content: '留言成功!'});
                    }
                },
                error:function (res){
                    return layer.open({title: '错误',content: '网络好像不通了，稍后请重试！'});
                }
            })
        })
    })
</script>
</body>
</html>